<template>
  <div class="foodList" v-if="index === 0">
    <van-tree-select
      v-model:main-active-index="activeIndex"
      height="88vw"
      :items="items"
      @click-nav="navClick"
    >
      <template #content>
        <div v-for="(item, index) in subItem" :key="index" class="item-bg">
          <ListItem
            :item="item"
            :handleAdd="handleAdd"
            :handelChange="handelChange"
          ></ListItem>
        </div>
      </template>
    </van-tree-select>
  </div>
  <div v-else>
    {{ foodata.content }}
  </div>
</template>

<script setup>
import { onMounted, ref, defineProps } from "vue";
import FoodListItem from "./FoodListItem.vue";
import ListItem from "../../../components/ListItem.vue";
const props = defineProps({
  index: Number,
  foodata: Object,
});
const activeIndex = ref(0);
const items = ref([{ text: "分组 1" }, { text: "分组 2" }]);
const subItem = ref([]);
const initData = () => {
  let newArray = [];
  props.foodata?.items?.forEach((item, index) => {
    newArray.push({
      text: item.text,
    });
    if (activeIndex.value === index) {
      subItem.value = item.children;
    }
    console.log(subItem);
  });
  items.value = newArray;
};
const navClick = (index) => {
  activeIndex.value = index;
  initData();
};
const handleAdd = (id) => {
  console.log(subItem);
  subItem.value.forEach((item, index) => {
    if (item.id === id) {
      item.add = false;
      item.num += 1;
    }
  });
};
const handelChange = (value, detail) => {
  subItem.value.forEach((item, index) => {
    if (item.id === detail.name) {
      item.num = value;
    }
  });
};

onMounted(() => initData());
</script>

<style scoped lang="less">
.foodList {
  margin-top: 20px;
  .img-bg {
    padding: 10px;
  }
}
/deep/.van-sidebar-item {
  --van-sidebar-selected-border-color: gold;
}
/deep/ .van-sidebar-item--select::before {
  background-color: #ffc400;
}
</style>
